<template>
  <div class="bind-info">
    <van-cell-group>
      <van-cell title="绑定手机号" is-link :value="isBindPhone?mobile:'未绑定'" @click="ChangePhone"/>
      <van-cell title="绑定微信号" is-link :value="isBindWeixin?'解绑':'绑定'" @click="BindWeixin"/>
      <van-cell title="设置登录密码" is-link @click="ResetLoginPassword"/>
      <van-button class="logout-btn" size="large" @click="LogoutAccount">注销当前账号</van-button>
    </van-cell-group>
    <!-- 绑定手机号 -->
    <van-popup v-model="PhoneShow" position="right" :overlay="false">
      <div class="phone-model">
        <div class="register-box">
          <div class="register-logo">
            <img src="../assets/img/logo.png" alt>
          </div>
          <div class="register-form">
            <div class="register-field">
              <i class="field-icon field-icon-account"></i>
              <input type="text" v-model.trim="Phone" maxlength="11" placeholder="请输入手机号">
            </div>
            <div class="register-field">
              <i class="field-icon field-icon-img"></i>
              <input type="text" v-model.trim="ImageVerifyCode" placeholder="请输入图形验证码">
              <div class="image-code">
                <img :src="CodeImageSrc" @click="getImageCode" alt="图形码">
              </div>
            </div>
            <div class="register-field">
              <i class="field-icon field-icon-phone"></i>
              <input type="text" v-model.trim="VerifyCode" placeholder="请输入短信验证码">
              <div class="code-btn">
                <button :disabled="CodeBtnDisabled" @click="getVerifyCode">{{CodeBtnText}}</button>
              </div>
            </div>
            <button class="bind-btn" @click="BindPhone">绑定手机号</button>
            <button class="bind-btn" style="background:#00bcd4;" @click="CloseModel">不绑定，返回</button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery';
export default {
  data() {
    return {
      mobile: '',
      Phone: '',
      isBindPhone: false,
      isBindWeixin: false,
      PhoneShow: false,
      ImageVerifyCode: '',
      CodeImageSrc: '',
      VerifyCode: '',
      ImageEncryptCode: '',
      CodeBtnDisabled: false,
      CodeBtnText: '获取验证码'
    };
  },
  created() {
    let token = this.$cookies.get('token');
    var that = this;
    $.ajax({
      type: 'GET',
      url: that.baseUrl + '/api/account/get',
      headers: { Authorization: token },
      success: function(res) {
        if (res.Phone) {
          that.mobile = res.Phone;
          that.isBindPhone = true;
        }
        if (res.Unionid) {
          that.isBindWeixin = true;
        }
      }
    });
  },
  watch: {
    PhoneShow: function(val, oldVal) {
      if (val) {
        this.getImageCode();
      }
    }
  },
  methods: {
    ResetLoginPassword() {
      if (this.isBindPhone) {
        window.location.href = '#/reset?phone=' + this.mobile;
      } else {
        this.$toast('您还未绑定手机号');
      }
    },
    LogoutAccount() {
      this.$dialog.confirm({
        title: '确认注销当前登录的账号？',
        message: '温馨提示：注销当前登录账号后您需要重新注册或使用微信重新授权登录才可以使用智慧展务平台相关服务'
      }).then(() => {
        var that = this;
        let token = this.$cookies.get('token');
        $.ajax({
          type: 'POST',
          url: that.baseUrl + '/api/account/DeleteUser',
          headers: { Authorization: token },
          success: function(res) {
            if (res.State) {
              that.$cookies.remove('token');
              localStorage.removeItem('token');
              window.location.href = '#/';
            }
          }
        });
      }).catch(() => {});
    },
    BindWeixin() {
      let ua = window.navigator.userAgent;
      if (!this.isBindWeixin) {
          if (/iPhone|iPod|Android|Mobile|ios|SymbianOS/i.test(ua)) {
            window.location.href = `#/wxqrcode`;
          } else {
            window.location.href = `http://es.11cm.com.cn/WeiXinManage/GetWeiXinOpenID?ST=test&NotRegister=true&ReferrerUrl=${encodeURIComponent(window.location.href)}`;
          }
      } else {
        this.$dialog.confirm({
          title: '确定解绑当前微信号？'
        }).then(() => {
          this.UnbundingWeixin();
        }).catch(() => {});
      }
    },
    UnbundingWeixin() {
      var that = this;
      let token = this.$cookies.get('token');
      $.ajax({
        type: 'POST',
        url: that.baseUrl + '/api/account/UnbundleWeixin',
        headers: { Authorization: token },
        success: function(res) {
          if (res.State) {
            that.$toast.success('解绑成功！');
            that.isBindWeixin = false;
            localStorage.removeItem('Unionid');
          } else {
            that.$toast(res.Message);
          }
        }
      });
    },
    BindPhone() {
      if (/^1[345678]\d{9}$/.test(this.Phone) == false) {
        this.$toast('请输入正确的手机号');
      } else if (this.VerifyCode == '') {
        this.$toast('请输入短信验证码');
      } else {
        var that = this;
        let token = this.$cookies.get('token');
        $.ajax({
          type: 'POST',
          url: that.baseUrl + '/api/account/BindingPhone',
          headers: { Authorization: token },
          data: {
            Phone: that.Phone,
            VerifyCode: that.VerifyCode
          },
          success: function(res) {
            if (res.State) {
              window.location.reload();
            } else {
              that.$toast(res.Message);
            }
          }
        });
      }
    },
    CloseModel() {
      this.PhoneShow = false;
    },
    ChangePhone() {
      this.PhoneShow = true;
    },
    getImageCode() {
      var that = this;
      $.ajax({
        type: 'GET',
        url: that.baseUrl + '/api/register/getImgVerifyCode',
        success: function(res) {
          if (res.State) {
            that.CodeImageSrc = res.ImageBase64;
            that.ImageEncryptCode = res.ImageEncryptCode;
          }
        }
      });
    },
    getVerifyCode() {
      if (this.Phone == '') {
        this.$toast('请先输入手机号');
      } else if (/^1[345678]\d{9}$/.test(this.Phone) == false) {
        this.$toast('手机号格式不正确');
      } else if (this.ImageVerifyCode == '') {
        this.$toast('请先输入图形验证码');
      } else {
        var that = this;
        this.CodeBtnDisabled = true;
        $.ajax({
          type: 'POST',
          url: that.baseUrl + '/api/register/getVerifyCode',
          data: {
            Phone: that.Phone,
            ImageEncryptCode: that.ImageEncryptCode,
            VerifyCode: that.ImageVerifyCode
          },
          success: function(res) {
            if (res.State) {
              let second = 120;
              that.CodeBtnText = '还剩' + second + '秒';
              var timer = setInterval(() => {
                second--;
                if (second > 0) {
                  that.CodeBtnText = '还剩' + second + '秒';
                } else {
                  clearInterval(timer);
                  that.CodeBtnDisabled = false;
                  that.CodeBtnText = '发送验证码';
                  second = 120;
                }
              }, 1000);
            } else {
              that.$toast(res.Message);
            }
          }
        });
      }
    }
  }
};
</script>

<style>
.bind-info {
  width: 100%;
}
.phone-model {
  width: 100vw;
  min-height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
}
.bind-btn {
  width: 100%;
  height: 44px;
  background: #37acff;
  color: #fff;
  font-size: 1em;
  border-radius: 4px;
  margin: 8vw 0 0 0;
}
.logout-btn{
  width: 92vw;
  height: 44px;
  margin: 8vw 4vw 0 4vw;
  border: 0;
  background: #37acff;
  color: #fff;
  font-size: 1em;
  line-height: normal;
  border-radius: 4px;
}
</style>
